<template>
    <div class="like-btn">
        <span  class="count">
            <i v-show="!isLike" class="like-icon like-icon-gray" @click="changeLike"></i>
            <i v-show="isLike" class="like-icon like-icon-red"></i>
            <span> {{ formatLikeCount }}</span>
            </span>
            <!--<div v-show="!isLike" class="follow" @click="changeFollow">
            <img src="/fengshui/static/pic/icon/follow.png" class="btn-follow">
            <span>关注</span></div>
                <div v-show="isLike" class="follow followed" @click="changeFollow">
            <img src="/fengshui/static/pic/icon/followed.png" class="btn-follow">
            <span>已关注</span>
            </div>-->
    </div>
</template>
<script>
    export default {
        props: ["likecount", "questionid", "likeid"],
        data() {
            return {
                id: this.likeid,
                questionCount: 0,
                like: false
            }
        },
        watch: {},
        computed: {
            isLike: function() {
                return (this.likeid != null) && !isNaN(this.likeid) || this.like;
            },
            formatLikeCount() {
                if (!this.like) {
                    return this.likecount;
                } else {
                    return Number(this.likecount) + 1;
                }
            }
        },
        created() {},
        mounted() {

        },
        methods: {
            changeLike: function() {
                let vm = this;
                let params = {
                    question_id: vm.questionid
                }
                vm.$http.jsonp(vm.url.acid + "&do=questionLike", {
                    params: params
                }).then(response => {
                    let data = response.body;
                    if (data.status == 'success') {
                        vm.like = true;
                        //通知父组件
                        // if (vm.index != null) {
                        // vm.$emit("followStatusChange", vm.index, vm.id);
                        // }

                    } else {

                    }
                }, response => {});

            }
        }
    }
</script>
<style>
    .like-icon {
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }
    
    .like-icon {
        width: .8rem;
        height: .8rem;
        vertical-align: -5%;
    }
    
    .like-icon-gray {
        color: #999;
        background-image: url('/fengshui/static/pic/icon/like.png');
    }
    
    .like-icon-red {
        color: #999;
        background-image: url('/fengshui/static/pic/icon/liked.png');
    }
</style>